<template>
	<div class="item-note-wp" 
		:id="itemObj.itemId"
		@mouseenter="onWrapOver"
		@mouseleave="onWrapOut"
	>
		<div class="img-wp">
			<div class="inner-img-wp">
				<img :src="itemObj.pic">
			</div>
		</div>
		<div class="item-name">{{itemObj.name}}</div>
		<div class="masker-wp" v-show="maskShow">
			<div class="edit-btn" 
				v-show="delBtnShow"
				@click="onEdit(itemObj)"
			>
				<span v-for="item in 3" class="s-del"></span>
			</div>
			<div class="masker"></div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name: 'item_note',
		props:["itemObj"],
		data () {
			return {
				maskShow:false,
				delBtnShow:false,
				delTimer:null,
			};
		},
		created() {
			
		},
		methods: {
			onWrapOver() {
				const vm = this;
				vm.maskShow = true;
				vm.delTimer = setTimeout( ()=>{
					vm.delBtnShow = true;
				},500)
				
			},
			onWrapOut() {
				const vm = this;
				this.maskShow = false;

				// vm.maskShow = true;
				vm.delBtnShow = false;
				clearTimeout(vm.delTimer);
			},
			onEdit(obj) {
				this.$store.commit("getDialogObj",{obj});
				this.$store.commit("fixDialogShow",true);
				// this.$emit("delItem",obj);
				// let res_pre = await fetch(`/delItem?id=${id}`);
				// let res = await res_pre.json();
				// if(res.code==0) {
				// 	this.$emit("delItem",id);
				// }
			}
		},
		computed:{

		}
	};
</script>
<style type="text/less" lang="less" scoped>
	.item-note-wp {
		width: 200px;
		height: 200px;
		border-radius: 6px;
		text-align: center;
		display: inline-block;
		box-sizing: border-box;
		padding-top: 27px;
		position:relative;
		cursor: pointer;
		margin-right: 20px;
		overflow: hidden;
		.img-wp {
			width: 108px;
			height: 108px;
			background-color: #ccc;
			text-align: center;
			border-radius:50%;
			display: inline-block;
			.inner-img-wp {
				width: 55px;
				height: 55px;
				overflow: hidden;
				display: inline-block;
				margin-top: 27px;
				position: relative;
				img {
					width: 100%;
					height: 100%;
				}
			}
			
		}	
		.item-name {
			width: 140px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 20px auto;
		}	
		.masker-wp {
			position:absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			
			.masker {
				position:absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0.28;
				background-color:#ded9d9;
			}
			.edit-btn {
				position:absolute;
				top: 5px;
				right: 10px;
				padding: 5px 10px;
				z-index: 10;
				.s-del {
					display: block;
					width: 6px;
					height: 6px;
					margin-top: 5px;
					background-color:#e55;
					border-radius:50%;
				}
			}
		}	
	}
</style>